<template>
  <div>
    <h2>水果店</h2>
    <table border="1" width="500" height="100">
      <tr>
        <th>苹果 {{ yuanjia }} ￥/斤，折扣&lt; 8折 &gt;</th>
      </tr>
      <tr>
        <th>
          请输入你要购买的斤数
          <input type="number" min="1" value="1" v-model.number="geshu2" />
        </th>
      </tr>
      <tr>
        <th><button @click="aaa">结账买单~</button></th>
      </tr>
      <tr>
        <th>
          结账单：总价{{ yuanzongjia }}￥元 折后价：{{ zhehoujia }}￥元 省了：{{
            sheng
          }}￥元
        </th>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shangpin: "苹果",
      yuanjia: 10,
      geshu: 1,
      geshu2: 1,
    };
  },
  methods: {
    aaa() {
      this.geshu = this.geshu2;
    },
  },
  computed: {
    yuanzongjia() {
      return this.yuanjia * this.geshu;
    },
    zhehoujia() {
      return this.yuanjia * this.geshu * 0.8;
    },
    sheng() {
      return this.yuanzongjia - this.zhehoujia;
    },
  },
};
</script>

<style>
</style>